<template>
  <div class="panel-style panel-box">
    <div class="pad-b-20 flex v-align-c">
      <h2 class="font-18 flex-item">微客分销排名</h2>
      <el-tabs v-model="dateType" class="mar-r-10" @tab-click="handleClick">
        <el-tab-pane label="今天" name="1"></el-tab-pane>
        <el-tab-pane label="昨天" name="2"></el-tab-pane>
        <el-tab-pane label="近7天" name="3"></el-tab-pane>
        <el-tab-pane label="近30天" name="4"></el-tab-pane>
      </el-tabs>
      <!--<span class="more-btn mar-l-30">更多</span>-->
    </div>
    <div class="pad-b-20">
      <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
        <el-table-column width="60" label="排序" align="center" type="index"></el-table-column>
        <el-table-column min-width="140" label="分销微客">
          <template slot-scope="scope">
            <div class="flex v-align-c cursor-p">
              <label>
                <img :src="scope.row.avatar" class="user-avatar">
              </label>
              <div class="font-14 pad-l-10">
                <div>{{ scope.row.nickname }}</div>
                <div>{{ scope.row.phone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分销订单" width="90" align="center" prop="orderNum">
          <template slot-scope="scope">
            <template v-if="scope.row.orderNum == null">
              0 笔
            </template>
            <template v-else>
              {{scope.row.orderNum }} 笔
            </template>
          </template>
        </el-table-column>
        <el-table-column min-width="70" label="分销金额" align="center" prop="sellPrice"></el-table-column>
        <el-table-column min-width="70" label="操作" align="center">
          <template slot-scope="scope">
            <div @click="showMemberDetail(scope.row)">查看详情</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.bar-show {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px 0px 20px 20px;
}
.number-panel {
  height: 204px;
  padding-top: 40px;
}
.number-orange {
  color: #fe980f;
}
.bar-icon {
  font-size: 42px !important;
  &.one-icon {
    font-size: 50px !important;
  }
  &.two-icon {
    font-size: 46px !important;
  }
  &.three-icon {
    font-size: 65px !important;
  }
}
.user-avatar {
  width: 46px;
  height: 46px;
  display: block;
  border-radius: 50px;
}
.panel-box {
  h2 {
    // margin: 0;
    padding: 0;
  }
  .more-btn {
    cursor: pointer;
    color: #36a3f7;
  }
}
.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}
.panel-style {
  background: #fff;
  padding: 16px 0px 0 20px;
  margin-bottom: 32px;
  &.panel-box {
    padding: 16px 20px 0 20px;
  }
}
</style>

<script>
  import { statMemberSell } from '@/api/goods/goods-statistics'

  export default {
    data() {
      return {
        dateType: '1',
        activeMember: 'first',
        dataList: [],
        listLoading: false
      }
    },
    // 初始化页面
    created() {
      this.initData()
    },
    methods: {
      initData() {
        const enterpriseId = this.getEnterpriseId()
        const data = {
          enterpriseId: enterpriseId,
          dateType: this.dateType
        }
        this.listLoading = true
        statMemberSell(data).then(response => {
          this.dataList = response.data
          this.listLoading = false
        })
      },
      handleClick() {
        this.initData()
      },
      showMemberDetail(row) {
        const memberId = row.memberId
        const enterpriseId = this.getEnterpriseId()
        this.$router.push({ path: '/user/member-shopkeeper/details/index', query: { memberId: memberId, enterpriseId: enterpriseId }})
      }
    }
  }
</script>
